<template>
  <div class="stat">
    <h4 class="stat_title">{{ title }}</h4>
    <p class="stat_subtitle">{{ subtitle }}</p>
    <slot></slot>
    <div class="stat_axis">
      <span v-for="(ax, i) in axis" :key="i" :class="isToday(i)?'todayx':''">{{ ax }}</span>
    </div>
  </div>
</template>

<script>
import Teacup from "@/components/mini/Teacup";

export default {
  props: {
    title: {
      type: String
    },
    subtitle: {
      type: String
    },
    axis: {
      type: Array
    }
  },
  components: {
    Teacup
  },
  methods: {
    isToday(i) {
      return new Date().getDay() === i;
    }
  }

}
</script>

<style lang="less">
.tea-item {
  float: left;
  margin: 0 3px;
}

.stat {
  margin: 0 20px 10px;
  padding: 16px 0;
  border-radius: 10px;
  background-color: white;
}

.stat_title {
  padding: 0 16px;
  font-weight: 900;
  font-size: 18px;
}

.stat_subtitle {
  margin-top: 4px;
  padding: 0 16px;
  color: #999;
  font-weight: 600;
  font-size: 14px;
}

.stat_axis {
  display: flex;
  justify-content: space-around;
  color: #999;
  font-size: 12px;
}

.todayx:after {
  content: '⬆';
  display: block;
}

</style>
